<#assign ctx=request.contextPath />
<#import '${ctx}/sys/include/table/select.html' as select />
<#import '${ctx}/biz/chart/element/chart_detail2.html' as cd/>
<#import '${ctx}/biz/chart/element/metric-select2.html' as metric />
<@cd.detail>
<div class="layui-row">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">选择数据源</label>
            <div class="layui-input-block"><@select.table name="dsId"
                show="dsName" url="${ctx}/biz/c/p/ds-select-table" />
            </div>
        </div>
        <label>指标设置</label>
        <hr/>
        <@metric.atom aggs="true" url="${ctx}/biz/chart/data"/>
    </form>
</div>
</@cd.detail>
<script type="text/javascript">
	layui.use(['layer','appJs'],function(){
		var $ = layui.$
		,layer = layui.layer
		,app = layui.appJs;

		window.handleResponse = function(chart,data) {
			let position = "";
			let color = "";
			let json = data.requestJson;
			let jsonObj = JSON.parse(json);
			let m = jsonObj.metric;
			while(m[0] && m[0].metric){
				m = m[0].metric;
			}
			let met = "__doc";
			let tag = 0;
			if(m[0]) {
				console.log(m[0].type)
				if(m[0].type == 'avg' || m[0].type == 'sum') {
					tag = 1;
					met = m[0].type
				}
			}

			let fieldList = data.fieldList;
			if(fieldList.length-tag == 1) {
				position = fieldList[0].id;
			}
			if(fieldList.length-tag == 2) {
				color = fieldList[1].id+"";
				position = fieldList[0].id;
			}
			const ds = new DataSet();

		    chart.scale({
		      __doc: {
		        sync: true,
		        nice: true,
		      }
		    });


		    const dv1 = ds.createView().source(data.listData);
		    const view1 = chart.createView();
		    view1.data(dv1.rows);
		    view1.axis(position, {
		      subTickLine: {
		        count: 3,
		        length: 3,
		      },
		      tickLine: {
		        length: 6,
		      },
		    });
		    view1.line().position(position+"*"+met);


		    const dv2 = ds.createView().source(dv1.rows);
		    dv2.transform({
		      type: 'regression',
		      method: 'polynomial',
		      fields: [position, met],
		      bandwidth: 0.1,
		      as: [position, met]
		    });

		    const view2 = chart.createView();
		    view2.axis(false);
		    view2.data(dv2.rows);
		    view2.line().position(position+"*"+met).style({
		      stroke: '#969696',
		      lineDash: [3, 3]
		    })
		      .tooltip(false);
		    view1.annotation().text({
		      content: '趋势线',
		      style: {
		        fill: '#8c8c8c',
		        fontSize: 14,
		        fontWeight: 300
		      },
		      offsetY: -70
		    });
		    chart.render();
		}

	});
</script>